<template>
	<view class="">
		
	
	<!-- 顶部搜索组件 -->
	<view class="input-box-component" v-if="fullLine">
		<!-- 一： -->
		<view class="input-box">
			<image src="/static/images/search.png" mode=""></image>
			<input type="text" v-model="searchValue" placeholder="请输入" />
		</view>
	</view>
		
	<!--二： 不同的 样式  选择关键词-->
	<view class="separate-box" v-if="separate">
		<view class="box-shade">
			<input type="text" placeholder-class="placeholder-color" v-model="searchValue" placeholder="请输入" />
		</view>
		<text>共{{ total }}个</text>
	</view>
	
	</view>
</template>

<script>
	/**
		* 多个顶部搜索组件集合
		* fullLine  是占满整行的  搜索
		* separate  是input和右侧的 结果数  如精准搜索的  选择关键词
	**/
	export default {
		//我的采集/  我的搜索
		name: 'mySearch',
		data() {
			return {
				// searchValue: '', //输入搜索的值
			}
		},
		props: {
			searchValue: {
				type: String
			},
			fullLine: {
				default: false,
			},
			separate: {
				default: false,
			},
			total: {
				default: 0
			}
		},
		
	}
</script>

<style lang="less">
	.input-box-component{
		width: 100%;
		background: #eee;
		padding: 15rpx 0;
		.input-box{
			width: 710rpx;
			height: 80rpx;
			margin: auto;
			background: #fff;
			border-radius: 1px;
			display: flex;
			align-items: center;
			padding: 20rpx 19rpx;
			box-sizing: border-box;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 15rpx;
			}
			
		}
		
	}
	.separate-box{
		display: flex;
		padding: 23rpx;
		align-items: center;
		.box-shade{
			box-shadow:inset 0px 0px 5px 1px #eee;
		}
		input{
			width: 520rpx;
			height: 77rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
		}
		.placeholder-color{
			color: #999999;
		}
		text{
			margin-left: auto;
			color: #CCCCCC;
			font-size: 30rpx;
		}
	}
</style>
